<template>
  <div class="loading" v-if="showLoading || tip">
    <div class="loading-center-absolute" v-if="showLoading">
      <div class="object"></div>
      <div class="object"></div>
      <div class="object"></div>
    </div>
    <div class="weui-loadmore weui-loadmore_line" v-else-if="tip" @click="onClick">
      <span class="weui-loadmore__tips">{{tip}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      showLoading: {
        type: Boolean,
        default: true
      },
      tip: {
        type: String,
        default: ''
      }
    },
    methods: {
      onClick(ev){
        var ev = ev || window.event;
        let target = ev.target || ev.srcElement;
        if(target.innerText.match(RegExp(/点击/))){
          this.$emit('click')
        }
      }
    }
  }
</script>

<style scoped lang="less" ref="stylesheet/less">
  @import "~common/less/variable";
  .loading{
    position: relative;
    height: 96px;
  }
  .loading-center-absolute {
    text-align: center;
    padding-top: 24px;
    height: 24px;
    width: 120px;
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
  }
  .object {
    width: 24px;
    height: 24px;
    background-color: @C1_400;
    float: left;
    margin-right: 24px;
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
    -webkit-animation: object 1s infinite;
    animation: object 1s infinite;
  }
  .object:nth-child(2) {
    background-color: @C3_600;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .object:nth-child(3) {
    background-color: @C2_400;
    margin-right: 0;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  @keyframes object {
    50% {
      -ms-transform: translate(0,-24px);
      -webkit-transform: translate(0,-24px);
      transform: translate(0,-24px);
    }
  }

  .weui-loadmore {
    width: 490px;
    margin: 1.5em auto;
    line-height: 1.6em;
    font-size: 28px;
    text-align: center;
    &.weui-loadmore_line {
      border-top: 2px solid #E5E5E5;
      margin-top: 2.4em;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      border-top: 0;
      &:before,&:after {
        position: relative;
        top: -2px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        content: '';
        border-top: 2px solid #E5E5E5;
      }
    }
    .weui-loadmore__tips {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -0.9em;
      padding: 0 0.55em;
      color: @C5_400;
    }
  }
</style>
